<script>
import {defineComponent} from 'vue'
import {delJAn, getJAn} from "@/api/api";

export default defineComponent({
    name: "startHandle",
    data() {
        return {
            localstartHandle:false,
            selectJiaoAn:undefined,
            tableData:[
            ]
        }
    },
    props:{
        startHandle:{
            type:Boolean,
            default:false
        }
    },
    methods: {
        close() {
            this.$emit('DialogClose')
        },
        addJiaoAn(){
            this.$emit('showAddJiaoAn')
        },
        async getJAList(){
            const res= await getJAn();
            if (res.data.code===200){
                this.tableData=res.data.data
            }else{
                this.$message.error('获取教案失败,请检查网络设置')
            }
        },
        async delJA(){
            if (this.selectJiaoAn){
                const res= await delJAn({id:this.selectJiaoAn})
                if (res.data.code===200){
                    this.$message.success('删除成功');
                    await this.getJAList();
                    this.selectJiaoAn=null
                }else{
                    this.$message.error('删除失败,请检查网络设置')
                }
            }else{
                this.$message.error('请选择教案')
            }

        }
    },
    watch:{
        startHandle(val){
            this.localstartHandle = val
            if (val){
                this.getJAList();
            }
        }
    }
})
</script>

<template>
    <el-dialog title="教案" :visible.sync="localstartHandle" width="30rem" @close="close" custom-class="switchPatrolDialog"  >
        <i class="el-icon-refresh-right refresh" @click="getJAList"></i>
        <div class="main">
     <div class="jiaoanList">
         <el-radio-group v-model="selectJiaoAn" style="display: flex;flex-direction: column">
          <el-radio v-for="(item,index) in tableData" :key="index" :label="item.id" style="margin-top: .5rem">{{item.name}}</el-radio>
         </el-radio-group>

     </div>
            <div class="btns">
            <el-button @click="close" style="margin-left: .6rem">确定</el-button>
            <el-button @click="addJiaoAn">新建教案</el-button>
            <el-button  @click="close">执行教案</el-button>
            <el-button  @click="delJA">删除教案</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<style scoped lang="less">
.el-button{
  color: #ebeff0;
  background: linear-gradient(#176575,#07283f);
  border:0;
  box-shadow: 0 -2px 0 rgba(16, 164, 195, .8);
  width: 8rem;
}

:deep(.el-input__inner) {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
:deep(.is-disabled .el-input__inner){
  background-color: #131f2a;
  border-color: rgba(255, 255, 255, 0.2);
  color: #999;
}
.eventList{
  margin-top: 1rem;
  background-color: transparent !important;
  height: 15rem;
  overflow: hidden;
  border-bottom: 1px solid #999;
}


/* 自定义 el-table 列单元格背景为透明 */
/deep/ .el-table .el-table__body tr {
  background-color: transparent !important; /* 设置行的背景为透明 */
}


/* 修改单元格边框颜色为透明 */
/deep/ .el-table th, .el-table td {
  border-color: #999 !important;
}
/deep/ .el-table th.el-table__cell{
  background-color: rgb(2, 22, 42) !important;
  color: #fff !important;
  font-weight: 700;
}
.btns{
  margin-top: 1rem;
  display: flex;
}
.jiaoanList{
  padding: 1rem;
  border: 1px solid #666;
  border-radius: 5px;
  width: 60%;
  height: 13rem;
  overflow: scroll;
}
.main{
  display: flex;
  justify-content: space-between;

}
.btns{
  display: flex;
  justify-content: start;
  flex-direction: column;
  .el-button{
    margin-bottom: 1rem;
  }
}
.refresh{
  color: white;
  position: absolute;
  left: 5rem;
  top: 1.2rem;
  cursor: pointer;
}
</style>
